﻿<template>
  <div class="magic-double-row-block">
    <div class="magic-row">
      <div
        v-for="(item, index) in list.slice(0, 2)"
        :key="item._id"
        class="double-row-box"
        :style="{
          'margin-right': getMarginRight(index),
          'margin-left': getMarginLeft(index),
        }"
      >
        <img
          :id="'img_' + item._id"
          class="img-double-row"
          :style="{ 'box-shadow': getBoxShadow, 'border-radius': getRadius }"
          :src="item.image ? item.image : defaultImg"
          @click="navigateTo(item)"
          @load="loadImage(item)"
        />
        <a
          v-for="area in item.hotAreaList"
          :id="'a' + '_' + item._id + '_' + area._id"
          :key="area._id"
          class="hot-area-block"
          @click="navigateTo(area)"
        ></a>
      </div>
    </div>
    <div class="magic-row" :style="{ 'margin-top': getMarginTop() }">
      <div
        v-for="(item, index) in list.slice(2, 4)"
        :key="item._id"
        class="double-row-box"
        :style="{
          'margin-right': getMarginRight(index),
          'margin-left': getMarginLeft(index),
        }"
      >
        <img
          :id="'img_' + item._id"
          class="img-double-row"
          :style="{ 'box-shadow': getBoxShadow, 'border-radius': getRadius }"
          :src="item.image ? item.image : defaultImg"
          @click="navigateTo(item)"
          @load="loadImage(item)"
        />
        <a
          v-for="area in item.hotAreaList"
          :id="'a' + '_' + item._id + '_' + area._id"
          :key="area._id"
          class="hot-area-block"
          @click="navigateTo(area)"
        ></a>
      </div>
    </div>
  </div>
</template>
<script>
import MixIn from '../../MixIn/index'
export default {
  name: 'DoubleRow',
  mixins: [MixIn],
  methods: {
    getMarginRight (index) {
      if (index === 0) {
        if (this.pageData.imageGutter < 2) {
          return this.pageData.imageGutter + 'px'
        }
        return this.pageData.imageGutter / 2 + 'px'
      } else {
        return 0
      }
    },
    getMarginLeft (index) {
      if (index === 1) {
        if (this.pageData.imageGutter < 2) {
          return 0
        }
        return this.pageData.imageGutter / 2 + 'px'
      } else {
        return 0
      }
    },
    getMarginTop () {
      if (this.pageData.imageGutter > 0) {
        return this.pageData.imageGutter + 'px'
      } else {
        return '0px'
      }
    },
  }
}
</script>

<style lang="less" scoped>
.magic-double-row-block {
  img {
    display: block;
  }
  .magic-row {
    display: flex;
    .double-row-box {
      margin-bottom: 0px;
      flex-grow: 1;
      .img-double-row {
        width: 100%;
      }
    }
  }

  .hot-area-block {
    position: absolute;
    display: block;
  }
}
</style>
